<template>
  <div>
    <el-container >
      <el-aside width="200px">
        <div
          style="
            border-bottom: 1px solid gray;
            margin-top: 100px;
            border-top: 1px solid gray;
          "
          @click="danxuan()"
        >
          单选
        </div>
        <div style="border-bottom: 1px solid gray" @click="jianda()">简答</div>
        <div style="border-bottom: 1px solid gray">多选</div>
      </el-aside>
      <el-container>
        <el-header
          ><p>
            问卷名称：<el-input
              v-model="question.name"
              placeholder="请输入内容"
              style="width: 300px"
            ></el-input
            ><el-button style="margin-left: 20px">确定</el-button>
          </p></el-header
        >
        <el-main>
          <el-card>
            <p style="height: 20px">问卷介绍词</p>
            <div class="content" style="margin-top: 20px">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="question.content"
              >
              </el-input>
            </div>
          </el-card>
          <el-card v-for="(item, index) in list" :key="index">
            <p style="font-size: 12px; margin-bottom: 10px">
              题目：{{ item.title
              }}<i
                class="el-icon-delete"
                style="margin-left: 15px"
                @click="delOne(item)"
              ></i
              ><i
                class="el-icon-sort"
                style="margin-left: 15px"
                @click="sort(item)"
              ></i>
            </p>
            <el-input v-if="item.answer.length < 4" type="textarea"> </el-input>
            <div v-else>
              <el-radio-group v-model="radio">
                <el-radio
                  v-for="(item1, index1) in item.answer"
                  :key="index1"
                  :label="item1"
                ></el-radio>
              </el-radio-group>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog title="单选题" :visible.sync="danxuanState">
      <el-form :model="form">
        <el-form-item label="题目名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单选选项" :label-width="formLabelWidth">
          <el-input
            v-model="x1"
            placeholder="请输入选项内容"
            style="width: 300px"
          ></el-input>
          <el-input
            v-model="x2"
            placeholder="请输入选项内容"
            style="width: 300px"
          ></el-input>
          <el-input
            v-model="x3"
            placeholder="请输入选项内容"
            style="width: 300px"
          ></el-input>
          <el-input
            v-model="x4"
            placeholder="请输入选项内容"
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="danxuanState = false">取 消</el-button>
        <el-button type="primary" @click="addyes">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="简答题" :visible.sync="jiandaState">
      <el-form :model="form">
        <el-form-item label="题目名称" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="jiandaState = false">取 消</el-button>
        <el-button type="primary" @click="addjyes">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: {
        name: "",
        content: "",
      },
      form: {
        title: "",
        answer: [],
        question_id: "",
        sort: "",
        type: "",
      },
      x1: "",
      x2: "",
      x3: "",
      x4: "",
      danxuanState: false,
      jiandaState: false,
      formLabelWidth: "120px",
      list: [],
      radio:true
    };
  },
  methods: {
    async getData() {
      let {
        data: { list },
      } = await this.axios.get("/getlist");
      this.list = list;
      console.log(this.list);
    },
    async danxuan() {
      this.danxuanState = true;
      let {
        data: { question_id },
      } = await this.axios.post("/addquestion", this.question);
      this.form.question_id = question_id;
      this.form.type = "单选";
      this.form.sort = 1;
    },
    async jianda() {
      this.jiandaState = true;
      let {
        data: { question_id },
      } = await this.axios.post("/addquestion", this.question);
      this.form.question_id = question_id;
      this.form.type = "简答";
      this.form.sort = 2;
    },
    async addyes() {
      this.danxuanState = false;
      this.form.answer.push(this.x1, this.x2, this.x3, this.x4);
      console.log(this.form);
      let {
        data: { code },
      } = await this.axios.post("/adddanxuan", this.form);
      if (code == 200) {
        this.$message.success("添加成功");
        this.form.title = "";
        this.form.answer = [];
        this.getData()
      }
    },
    async addjyes() {
      this.jiandaState = false;
      let {
        data: { code },
      } = await this.axios.post("/addjianda", this.form);
      if (code == 200) {
        this.$message.success("添加成功");
        this.form.title = "";
        this.form.answer = [];
        this.getData()
      }
    },
    async delOne(data) {
      console.log(data);
      let {
        data: { code },
      } = await this.axios.post("/delOne", data);
      if (code == 200) {
        this.$message.success("删除成功");
        this.getData()
      }
    },
    async sort(data) {
      console.log(data);
      let {
        data: { code },
      } = await this.axios.post("/sort", data);
      if (code == 200) {
        this.$message.success("排序成功");
        this.getData();
      }
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.el-radio {
  display: block !important;
  line-height: 30px !important;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  align-items: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 40px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  /* line-height: 160px; */
  display: flex;
  flex-direction: column;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>